<template>
  <div class="icon-body">
    <el-input v-model="iconName" prefix-icon="Search" clearable placeholder="请输入图标名称" @clear="filterIcons"
      @input="filterIcons">
    </el-input>

    <el-tabs model-value="inner">
      <el-tab-pane name="inner">
        <template #label>
          <el-badge :value="icons.innerIcon?.length || 0" type="primary">
            内置图标
          </el-badge>
        </template>
        <el-scrollbar height="200px">
          <el-row :gutter="0">
            <el-col :span="8" :offset="0" v-for="(item, index) in icons.innerIcon" class="icon-item-wrapper"
              :key="index">
              <div :class="['icon-item', { active: activeIcon === item }]" @click="selectedIcon(item)">
                <IconPlus :size="14" :name="item"></IconPlus>
                <span>{{ item }}</span>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane name="elementPlus">
        <template #label>
          <el-badge :value="icons.elementIcons?.length" type="primary">
            ElementPlus图标
          </el-badge>
        </template>
        <el-scrollbar height="200px">
          <el-row :gutter="0">
            <el-col :span="8" :offset="0" v-for="(item, index) in icons.elementIcons" class="icon-item-wrapper"
              :key="index">
              <div :class="['icon-item', { active: activeIcon === item }]" @click="selectedIcon(`ele-${item}`)">
                <IconPlus :size="14" :name="`ele-${item}`"></IconPlus>
                <span>{{ `ele-${item}` }}</span>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane name="customize">
        <template #label>
          <el-badge :value="icons.customizeIcons?.length || 0" type="primary">
            个性化图标
          </el-badge>
        </template>
        <el-scrollbar height="200px">
          <el-row :gutter="0">
            <el-col :span="8" :offset="0" v-for="(item, index) in icons.customizeIcons" class="icon-item-wrapper"
              :key="index">
              <div :class="['icon-item', { active: activeIcon === item }]" @click="selectedIcon(item)">
                <IconPlus :size="14" :name="`${item}`"></IconPlus>
                <span>{{ `${item}` }}</span>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script setup>
import innerIcon from './requireIcons'
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance()

// element 图标
const elementIcons = ref(Object.keys(ElementPlusIconsVue));
//内置图标
const iconList = ref(innerIcon);
//个性化图标
const customizeIcons = Object.values(proxy.$svgIcons);

const props = defineProps({
  activeIcon: {
    type: String
  }
});

const icons = reactive({
  innerIcons: innerIcon.value,
  elementIcons: elementIcons.value,
  customizeIcons: customizeIcons
})

const iconName = ref('');

const emit = defineEmits(['selected']);

function filterIcons() {
  const searchTerm = iconName.value.toLowerCase();
  if (iconName.value) {
    icons.innerIcon = innerIcon.filter(item => item.toLowerCase().indexOf(searchTerm) !== -1);
    icons.elementIcons = elementIcons.value.filter(item => item.toLowerCase().indexOf(searchTerm) !== -1);
    icons.customizeIcons = customizeIcons.filter(item => item.toLowerCase().indexOf(searchTerm) !== -1);
  } else {
    icons.innerIcon = innerIcon;
    icons.elementIcons = elementIcons.value;
    icons.customizeIcons = customizeIcons;
  }
}

function selectedIcon(name) {
  emit('selected', name)
  document.body.click()
}

function reset() {
  iconName.value = ''
  icons.innerIcon = innerIcon;
  icons.elementIcons = elementIcons.value;
  icons.customizeIcons = customizeIcons;
}

defineExpose({
  reset
})
</script>

<style lang='scss' scoped>
.icon-body {
  width: 100%;
  padding: 10px;

  // .icon-search {
  //   position: relative;
  //   margin-bottom: 7px;
  // }


  .icon-item-wrapper {
    padding-bottom: 5px;

    .icon-item {
      cursor: pointer;
      display: flex;
      padding: 0 5px;
      align-items: center;
      gap: 6px;

      &:hover {
        background-color: var(--el-bg-color);
        border-radius: 5px;
        box-shadow: var(--el-box-shadow-light);
      }

      span {
        fill: currentColor;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .icon-item.active {
      color: var(--el-color-primary-dark-2);
      background-color: var(--el-bg-color-page);
      border-radius: 5px;
      box-shadow: var(--el-box-shadow-lighter);
    }
  }
}
</style>